<template>
    <!--面包屑-->
    <div style="margin-bottom: 30px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <router-link to="/Settlements/ChargeableExpensesShow">应收费用管理</router-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>应收费用显示</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <table style="width: 80%;">
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    外协单位:<el-input v-model="form.outsourcedUnits" style="width: 200px" clearable />
                </td>
                <td>
                    结算方式:<el-select v-model="form.paymentMethod" style="width: 200px" clearable>
                        <el-option label="微信支付" value="微信支付" />
                        <el-option label="支付宝支付" value="支付宝支付" />
                        <el-option label="银联支付" value="银联支付" />
                        <el-option label="企业转账" value="企业转账" />
                        <el-option label="线下支付" value="线下支付" />
                        <el-option label="私人转账" value="私人转账" />
                    </el-select>
                </td>
                <td>
                    核对状态:<el-select v-model="form.checkStatus" style="width: 200px" clearable>
                        <el-option label="未核对" value="false" />
                        <el-option label="已核对" value="true" />
                    </el-select>
                </td>
            </tr>
            <tr>
                <td>
                    经办人:<el-input v-model="form.costManagementAttn" style="width: 200px" clearable />
                </td>
                <td>
                    业务日期:<el-date-picker v-model="form.businessDate" value-forma="YYYY-MM-DD" style="width: 200px" type="date" clearable />
                </td>
                <td>
                    <!-- <div v-show="form.buttonArray.includes('getFeesExpensesList')" class="table-operation"
                        style="margin-top: 8px;"> -->
                    <el-button type="primary" @click="getFeesExpensesList()" :icon="Search">查询</el-button>
                    <!-- </div> -->

                    <!-- <div v-show="form.buttonArray.includes('reset')" class="table-operation" style="margin-top: 8px;"> -->
                    <el-button :icon="RefreshRight" @click="reset()">重置</el-button>
                    <!-- </div> -->
                </td>
            </tr>
        </tbody>
    </table>
    <!-- <div v-show="form.buttonArray.includes('addFeesExpenses')" class="table-operation" style="margin-top: 8px;"> -->
    <el-button type="primary" @click="addFeesExpenses()">新增</el-button>
    <!-- </div> -->

    <!-- <div v-show="form.buttonArray.includes('batchDel')" class="table-operation" style="margin-top: 8px;"> -->
    <el-button type="primary" @click="batchDel()">批量删除</el-button>
    <!-- </div> -->

    <el-table :data="feesExpensesList" border style="width: 100%;text-align: center;margin-top: 10px"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="ticketNumber" label="业务单号" />
        <el-table-column prop="outsourcedUnits" label="外协单位" />
        <el-table-column prop="paymentMethod" label="结算方式">
            <template v-slot="scope">
                <el-tag type="primary" v-if="scope.row.paymentMethod == '微信支付'">微信支付</el-tag>
                <el-tag type="success" v-if="scope.row.paymentMethod == '支付宝支付'">支付宝支付</el-tag>
                <el-tag type="info" v-if="scope.row.paymentMethod == '银联支付'">银联支付</el-tag>
                <el-tag type="warning" v-if="scope.row.paymentMethod == '企业转账'">企业转账</el-tag>
                <el-tag type="danger" v-if="scope.row.paymentMethod == '线下支付'">线下支付</el-tag>
                <el-tag type="danger" v-if="scope.row.paymentMethod == '其它'">{{ scope.row.otherPaymentMethod }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="tonnage" label="吨位(立方米)" />
        <el-table-column prop="costManagementPrice" label="单价(元/立方米)" />
        <el-table-column prop="costManagementAmount" label="金额(元)" />
        <el-table-column prop="businessDate" label="业务日期">
            <template v-slot="scope">
                <span v-if="scope.row.businessDate == null ? '' : scope.row.businessDate">{{
                scope.row.businessDate.substring(0, 10) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="costManagementAttn" label="经办人" />
        <el-table-column prop="createdDate" label="创建时间">
            <template v-slot="scope">
                <span v-if="scope.row.createdDate == null ? '' : scope.row.createdDate">{{
                scope.row.createdDate.substring(0, 16).replace("T", " ") }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="costManagementRemark" label="备注">
            <template v-slot="scope">
                {{ scope.row.costManagementRemark ? scope.row.costManagementRemark : '-' }}
            </template>
        </el-table-column>
        <el-table-column prop="checkStatus" label="核对状态">
            <template v-slot="scope">
                {{ scope.row.checkStatus == true ? '已核对' : '未核对' }}
            </template>
        </el-table-column>
        <el-table-column prop="checkPeople" label="核对人">
            <template v-slot="scope">
                {{ scope.row.checkPeople ? scope.row.checkPeople : '-' }}
            </template>
        </el-table-column>
        <el-table-column prop="checkDate" label="核对时间">
            <template v-slot="scope">
                <span v-if="scope.row.checkDate == null ? '' : scope.row.checkDate">{{
                scope.row.checkDate.substring(0, 16).replace("T", " ") }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="242">
            <template v-slot="scope">
                <!-- <div v-show="form.buttonArray.includes('jumpExpensesUpd')" class="table-operation"
                    style="margin-top: 8px;"> -->
                <el-button @click="jumpExpensesUpd(scope.row.expensesId)" type="primary" size="small" link
                    :icon="Edit">编辑</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('delExpenses')" class="table-operation" style="margin-top: 8px;"> -->
                <el-button @click="delExpenses(scope.row)" type="primary" size="small" link
                    :icon="CircleCloseFilled">删除</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('jumpInspect')" class="table-operation" style="margin-top: 8px;"> -->
                <el-button @click="jumpInspect(scope.row.expensesId)" type="primary" size="small" link
                    :icon="CircleCheckFilled">查看</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('updCheck')" class="table-operation" style="margin-top: 8px;"> -->
                <el-button @click="updCheck(scope.row)" type="primary" size="small" link :icon="Edit">核对</el-button>
                <!-- </div> -->
            </template>
        </el-table-column>
    </el-table>

    <table style="float: right;">
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
                        layout="total, slot, prev, pager, next" :total="form.totalCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        <span>,每页{{ form.pageSize }}条,共{{ form.pageIndex }}/{{ form.totalPage }}页</span>
                        <el-button class="btn-prev" :disabled="form.pageIndex == 1"
                            @click="handleCurrentChange(1)">首页</el-button>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
                        layout="slot, sizes,jumper" :total="form.totalCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        <el-button class="btn-prev" :disabled="form.pageIndex == form.totalPage"
                            @click="handleCurrentChange(form.totalPage)">尾页</el-button>
                    </el-pagination>
                </td>
            </tr>
        </tbody>
    </table>


    <el-dialog v-model="dialogFormVisible" title="应收费详情" width="700">
        <table border
            style="border-collapse: collapse; margin-left: 10%;width: 500px;height: 500px;text-align: center;">
            <thead></thead>
            <tbody>
                <tr>
                    <td>业务单号:</td>
                    <td>
                        {{ form1.ticketNumber }}
                    </td>
                </tr>
                <tr>
                    <td>外协单位:</td>
                    <td>
                        {{ form1.outsourcedUnits }}
                    </td>
                </tr>
                <tr>
                    <td>结算方式:</td>
                    <td>
                        {{ form1.paymentMethod }}
                    </td>
                </tr>
                <tr>
                    <td>吨位(立方米):</td>
                    <td>
                        {{ form1.tonnage }}
                    </td>
                </tr>
                <tr>
                    <td>单价(元/立方米):</td>
                    <td>
                        {{ form1.costManagementPrice }}
                    </td>
                </tr>
                <tr>
                    <td>金额(元):</td>
                    <td>
                        {{ form1.costManagementAmount }}
                    </td>
                </tr>
                <tr>
                    <td>业务日期:</td>
                    <td>
                        {{ form1.businessDate.substring(0, 10) }}
                    </td>
                </tr>
                <tr>
                    <td>经办人:</td>
                    <td>
                        {{ form1.costManagementAttn }}
                    </td>
                </tr>
                <tr>
                    <td>备注:</td>
                    <td>
                        {{ form1.costManagementRemark }}
                    </td>
                </tr>
                <tr>
                    <td>核对状态:</td>
                    <td>
                        {{ form1.checkStatus == true ? "已核对" : "未核对" }}
                    </td>
                </tr>
                <tr>
                    <td>核对时间:</td>
                    <td>
                        <span v-if="form1.checkDate == null ? '' : form1.checkDate">{{ form1.checkDate.substring(0,
                16).replace("T", " ") }}</span>
                    </td>
                </tr>
                <tr>
                    <td>核对人:</td>
                    <td>
                        {{ form1.checkPeople }}
                    </td>
                </tr>
            </tbody>
        </table>
    </el-dialog>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Edit, CircleCheckFilled, CircleCloseFilled, RefreshRight } from '@element-plus/icons-vue'
const router = useRouter()
const route = useRoute()
const form = reactive({
    shipperIsUnit: '',
    outsourcedUnits: '',
    paymentMethod: '',
    checkStatus: '',
    costManagementAttn: '',
    businessDate: '',
    expensesClassify: 2,
    companyID: '',
    pageIndex: 1,
    pageSize: 3,
    totalCount: 0,
    totalPage: 0,
    buttonArray: ['jumpExpensesUpd', 'getFeesExpensesList', 'reset', 'addFeesExpenses', 'batchDel', 'delExpenses', 'jumpInspect', 'updCheck']
})


//根据菜单id查询按钮功能权限
const getRoleMenuFun = () => {
    axios.get('http://47.96.109.219:5202/api/RoleMenuFun/RoleMenuFunId', {
        params: {
            menuId: route.query.id
        }
    }).then(res => {
        console.log(res);
        form.buttonArray = res.data.data
    }).catch(err => {
        console.log(err);

    })
}

const form1 = reactive({
    createdBy: "张三",  // 创建人   
    createdDate: new Date(),    // 创建日期
    updatedBy: "张三",  // 更新人
    updatedDate: new Date(),     // 更新日期
    // deletedBy: "",  // 删除人
    // deletedDate: "",    // 删除日期
    isDeleted: false,        // 是否删除
    expensesId: 0,          // 费用ID
    companyID: "",          // 公司ID
    user_Id: 0,         // 用户ID
    ticketNumber: "",        // 票号
    shipperIsUnit: "",      // 承运/货主单位
    outsourcedUnits: "",    // 外包单位
    paymentMethod: "",      // 付款方式
    otherPaymentMethod: "",    // 其他付款方式
    tonnage: '',            // 吨数
    costManagementPrice: '',    // 成本管理单价
    costManagementAmount: '',    // 成本管理金额
    businessDate: "",      // 业务日期
    costManagementAttn: "",      // 成本管理经办人
    costManagementRemark: "",    // 成本管理备注
    checkStatus: false,        // 审核状态
    checkPeople: "",           // 审核人
    checkDate: "",         // 审核日期
    expensesClassify: 1,      // 费用分类
})

//显示应付费   
const feesExpensesList = ref([])
const getFeesExpensesList = () => {
    axios.get("/jread/api/Expenses/Show", {
        params: {
            ShipperIsUnit: form.shipperIsUnit,
            OutsourcedUnits: form.outsourcedUnits,
            PaymentMethod: form.paymentMethod,
            CheckStatus: form.checkStatus || null,
            CostManagementAttn: form.costManagementAttn,
            BusinessDate: form.businessDate,
            ExpensesClassify: form.expensesClassify,
            CompanyID: form.companyID,
            PageIndex: form.pageIndex,
            PageSize: form.pageSize,
        }
    })
        .then((res) => {
            feesExpensesList.value = res.data.data.list
            form.totalCount = res.data.data.totalCount
            form.totalPage = res.data.data.totalPage
        })
        .catch((err) => {
            console.log(err)
        })
}

//分页
const handleSizeChange = (val: number) => {
    form.pageSize = val
    getFeesExpensesList()
}
const handleCurrentChange = (val: number) => {
    form.pageIndex = val
    getFeesExpensesList()
}

//删除
const delExpenses = (row: any) => {
    ElMessageBox.confirm(
        '确认要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post("/swrite/api/Expenses/Delete", row)
                .then((res) => {
                    if (res.data.code == 0) {
                        ElMessage.success("删除成功");
                        getFeesExpensesList();
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消该操作',
            })
        })
}

//批删选中
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    console.log(multipleSelection.value)
}
//批删
const batchDel = () => {
    ElMessageBox.confirm(
        '确认要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            var ids: any = [];
            multipleSelection.value.forEach((item: any) => {
                ids.push(item.expensesId)
                console.log(ids)
            })
            axios.post("/swrite/api/Expenses/BatchDel?ExpensesId=" + ids)
                .then((res) => {
                    if (res.data.code == 0) {
                        ElMessage.success("删除成功");
                        getFeesExpensesList();
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消该操作',
            })
        })
}

//核对
const updCheck = (row: any) => {
    axios.post("/swrite/api/Expenses/Check", row)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage.success("核对成功");
                getFeesExpensesList();
            }
        })
        .catch((err) => {
            console.log(err)
        })
}

//跳转修改页面
const jumpExpensesUpd = (expensesId: any) => {
    router.push({
        name: '/ChargeableExpenUpdate',
        query: {
            expensesId: expensesId
        }
    })
}

const dialogFormVisible = ref(false);
//打开查看弹窗
const jumpInspect = (expensesId: any) => {
    dialogFormVisible.value = true;
    getExpensesModel(expensesId);
}
//返填
const getExpensesModel = (expensesId: any) => {
    axios.get("/jread/api/Expenses/Backfill?ExpensesId=" + expensesId)
        .then(res => {
            form1.createdBy = res.data.data.createdBy;
            form1.createdDate = res.data.data.createdDate;
            form1.updatedBy = res.data.data.updatedBy;
            form1.updatedDate = res.data.data.updatedDate;
            // form1.deletedBy= res.data.data.deletedBy;
            // form1.deletedDate= res.data.data.deletedDate;
            form1.isDeleted = res.data.data.isDeleted;
            form1.expensesId = res.data.data.expensesId;
            form1.companyID = res.data.data.companyID;
            form1.user_Id = res.data.data.user_Id;
            form1.ticketNumber = res.data.data.ticketNumber;
            form1.shipperIsUnit = res.data.data.shipperIsUnit;
            form1.outsourcedUnits = res.data.data.outsourcedUnits;
            form1.paymentMethod = res.data.data.paymentMethod;
            form1.otherPaymentMethod = res.data.data.otherPaymentMethod;
            form1.tonnage = res.data.data.tonnage;
            form1.costManagementPrice = res.data.data.costManagementPrice;
            form1.costManagementAmount = res.data.data.costManagementAmount;
            form1.businessDate = res.data.data.businessDate;
            form1.costManagementAttn = res.data.data.costManagementAttn;
            form1.costManagementRemark = res.data.data.costManagementRemark;
            form1.checkStatus = res.data.data.checkStatus;
            form1.checkPeople = res.data.data.checkPeople;
            form1.checkDate = res.data.data.checkDate;
            form1.expensesClassify = res.data.data.expensesClassify;
        })
        .catch(err => {
            console.log(err);
        })
}



//重置查询条件
const reset = () => {
    form.shipperIsUnit = ''
    form.outsourcedUnits = ''
    form.paymentMethod = ''
    form.checkStatus = ''
    form.costManagementAttn = ''
    form.businessDate = ''
    getFeesExpensesList()
}

//跳转新增收费页面
const addFeesExpenses = () => {
    router.push("ChargeableExpensesAdd")
}

onMounted(() => {
    getFeesExpensesList();
    getRoleMenuFun();
})
</script>